#!/usr/bin/env python3
"""
Element UI 按钮样式演示 (简化版)
展示改进后的Element UI风格按钮样式，去除不兼容的CSS属性
"""

import sys
import os

# 添加项目根目录到Python路径
sys.path.insert(0, os.path.join(os.path.dirname(__file__), '..'))

try:
    from PySide6.QtWidgets import *
    from PySide6.QtCore import *
    from PySide6.QtGui import *
except ImportError:
    try:
        from PyQt6.QtWidgets import *
        from PyQt6.QtCore import *
        from PyQt6.QtGui import *
    except ImportError:
        try:
            from PySide2.QtWidgets import *
            from PySide2.QtCore import *
            from PySide2.QtGui import *
        except ImportError:
            from PyQt5.QtWidgets import *
            from PyQt5.QtCore import *
            from PyQt5.QtGui import *

from element_ui.styles import theme_manager


class ElementButton(QPushButton):
    """Element UI 风格按钮组件"""
    
    # Element UI 按钮配置
    BUTTON_CONFIGS = {
        'default': {
            'normal': {
                'background-color': '#ffffff',
                'color': '#606266',
                'border-color': '#dcdfe6'
            },
            'hover': {
                'background-color': '#ecf5ff',
                'color': '#409eff',
                'border-color': '#c6e2ff'
            },
            'active': {
                'background-color': '#3a8ee6',
                'color': '#ffffff',
                'border-color': '#3a8ee6'
            },
            'disabled': {
                'background-color': '#ffffff',
                'color': '#c0c4cc',
                'border-color': '#ebeef5'
            },
            'plain': {
                'normal': {
                    'background-color': '#ffffff',
                    'color': '#606266',
                    'border-color': '#dcdfe6'
                },
                'hover': {
                    'background-color': '#409eff',
                    'color': '#ffffff',
                    'border-color': '#409eff'
                }
            }
        },
        'primary': {
            'normal': {
                'background-color': '#409eff',
                'color': '#ffffff',
                'border-color': '#409eff'
            },
            'hover': {
                'background-color': '#66b1ff',
                'color': '#ffffff',
                'border-color': '#66b1ff'
            },
            'active': {
                'background-color': '#3a8ee6',
                'color': '#ffffff',
                'border-color': '#3a8ee6'
            },
            'disabled': {
                'background-color': '#a0cfff',
                'color': '#ffffff',
                'border-color': '#a0cfff'
            },
            'plain': {
                'normal': {
                    'background-color': '#ecf5ff',
                    'color': '#409eff',
                    'border-color': '#b3d8ff'
                },
                'hover': {
                    'background-color': '#409eff',
                    'color': '#ffffff',
                    'border-color': '#409eff'
                }
            }
        },
        'success': {
            'normal': {
                'background-color': '#67c23a',
                'color': '#ffffff',
                'border-color': '#67c23a'
            },
            'hover': {
                'background-color': '#85ce61',
                'color': '#ffffff',
                'border-color': '#85ce61'
            },
            'active': {
                'background-color': '#5daf34',
                'color': '#ffffff',
                'border-color': '#5daf34'
            },
            'disabled': {
                'background-color': '#b3e19d',
                'color': '#ffffff',
                'border-color': '#b3e19d'
            },
            'plain': {
                'normal': {
                    'background-color': '#f0f9ff',
                    'color': '#67c23a',
                    'border-color': '#c2e7b0'
                },
                'hover': {
                    'background-color': '#67c23a',
                    'color': '#ffffff',
                    'border-color': '#67c23a'
                }
            }
        },
        'info': {
            'normal': {
                'background-color': '#909399',
                'color': '#ffffff',
                'border-color': '#909399'
            },
            'hover': {
                'background-color': '#a6a9ad',
                'color': '#ffffff',
                'border-color': '#a6a9ad'
            },
            'active': {
                'background-color': '#82848a',
                'color': '#ffffff',
                'border-color': '#82848a'
            },
            'disabled': {
                'background-color': '#c8c9cc',
                'color': '#ffffff',
                'border-color': '#c8c9cc'
            },
            'plain': {
                'normal': {
                    'background-color': '#f4f4f5',
                    'color': '#909399',
                    'border-color': '#d3d4d6'
                },
                'hover': {
                    'background-color': '#909399',
                    'color': '#ffffff',
                    'border-color': '#909399'
                }
            }
        },
        'warning': {
            'normal': {
                'background-color': '#e6a23c',
                'color': '#ffffff',
                'border-color': '#e6a23c'
            },
            'hover': {
                'background-color': '#ebb563',
                'color': '#ffffff',
                'border-color': '#ebb563'
            },
            'active': {
                'background-color': '#cf9236',
                'color': '#ffffff',
                'border-color': '#cf9236'
            },
            'disabled': {
                'background-color': '#f3d19e',
                'color': '#ffffff',
                'border-color': '#f3d19e'
            },
            'plain': {
                'normal': {
                    'background-color': '#fdf6ec',
                    'color': '#e6a23c',
                    'border-color': '#f5dab1'
                },
                'hover': {
                    'background-color': '#e6a23c',
                    'color': '#ffffff',
                    'border-color': '#e6a23c'
                }
            }
        },
        'danger': {
            'normal': {
                'background-color': '#f56c6c',
                'color': '#ffffff',
                'border-color': '#f56c6c'
            },
            'hover': {
                'background-color': '#f78989',
                'color': '#ffffff',
                'border-color': '#f78989'
            },
            'active': {
                'background-color': '#dd6161',
                'color': '#ffffff',
                'border-color': '#dd6161'
            },
            'disabled': {
                'background-color': '#fab6b6',
                'color': '#ffffff',
                'border-color': '#fab6b6'
            },
            'plain': {
                'normal': {
                    'background-color': '#fef0f0',
                    'color': '#f56c6c',
                    'border-color': '#fbc4c4'
                },
                'hover': {
                    'background-color': '#f56c6c',
                    'color': '#ffffff',
                    'border-color': '#f56c6c'
                }
            }
        }
    }
    
    # 按钮尺寸配置
    SIZE_CONFIGS = {
        'large': {'height': 40, 'padding': '11px 19px', 'font-size': '14px'},
        'default': {'height': 32, 'padding': '8px 15px', 'font-size': '14px'},
        'small': {'height': 28, 'padding': '6px 11px', 'font-size': '12px'},
        'mini': {'height': 24, 'padding': '4px 7px', 'font-size': '12px'}
    }
    
    def __init__(self, text="", button_type="default", size="default", plain=False, parent=None):
        super().__init__(text, parent)
        self.button_type = button_type
        self.size = size
        self.plain = plain
        self._setup_button()
    
    def _setup_button(self):
        """设置按钮样式"""
        self._apply_style()
        
    def _apply_style(self):
        """应用样式配置到QPushButton"""
        config = self.BUTTON_CONFIGS.get(self.button_type, self.BUTTON_CONFIGS['default'])
        size_config = self.SIZE_CONFIGS.get(self.size, self.SIZE_CONFIGS['default'])
        
        # 根据是否为朴素按钮选择样式
        if self.plain and 'plain' in config:
            normal_style = config['plain']['normal']
            hover_style = config['plain']['hover']
            active_style = config['plain']['hover']  # 朴素按钮的active和hover相同
        else:
            normal_style = config['normal']
            hover_style = config['hover']
            active_style = config['active']
        
        disabled_style = config['disabled']
        
        # 构建样式字符串
        style = f"""
            QPushButton {{
                background-color: {normal_style['background-color']};
                color: {normal_style['color']};
                border: 1px solid {normal_style['border-color']};
                border-radius: 4px;
                padding: {size_config['padding']};
                font-size: {size_config['font-size']};
                font-weight: 500;
                font-family: 'Microsoft YaHei', Arial, sans-serif;
                text-align: center;
                outline: none;
            }}
            
            QPushButton:hover {{
                background-color: {hover_style['background-color']};
                color: {hover_style['color']};
                border-color: {hover_style['border-color']};
            }}
            
            QPushButton:pressed {{
                background-color: {active_style['background-color']};
                color: {active_style['color']};
                border-color: {active_style['border-color']};
            }}
            
            QPushButton:disabled {{
                background-color: {disabled_style['background-color']};
                color: {disabled_style['color']};
                border-color: {disabled_style['border-color']};
            }}
        """
        
        self.setStyleSheet(style)
        
        # 设置按钮尺寸
        self.setFixedHeight(size_config['height'])
        self.setMinimumWidth(64)


class ButtonShowcase(QWidget):
    """按钮展示窗口"""
    
    def __init__(self):
        super().__init__()
        self.setWindowTitle("Element UI 按钮样式演示")
        self.setGeometry(100, 100, 1200, 800)
        self.setStyleSheet("""
            QWidget {
                background-color: #f5f7fa;
                font-family: 'Microsoft YaHei', Arial, sans-serif;
            }
        """)
        self.setup_ui()
    
    def setup_ui(self):
        """设置UI"""
        layout = QVBoxLayout(self)
        layout.setSpacing(20)
        layout.setContentsMargins(30, 30, 30, 30)
        
        # 标题
        title = QLabel("Element UI 风格按钮样式演示")
        title.setStyleSheet("""
            QLabel {
                font-size: 28px;
                font-weight: bold;
                color: #303133;
                margin-bottom: 20px;
                text-align: center;
            }
        """)
        title.setAlignment(Qt.AlignCenter)
        layout.addWidget(title)
        
        # 基础按钮区域
        basic_group = self.create_basic_buttons_group()
        layout.addWidget(basic_group)
        
        # 朴素按钮区域
        plain_group = self.create_plain_buttons_group()
        layout.addWidget(plain_group)
        
        # 不同尺寸按钮区域
        size_group = self.create_size_buttons_group()
        layout.addWidget(size_group)
        
        # 按钮状态演示区域
        state_group = self.create_button_states_group()
        layout.addWidget(state_group)
        
        # 状态消息区域
        self.status_label = QLabel("")
        self.status_label.setStyleSheet("""
            QLabel {
                color: #67c23a;
                font-size: 14px;
                padding: 10px;
                background-color: #f0f9ff;
                border: 1px solid #c2e7b0;
                border-radius: 4px;
                margin-top: 10px;
            }
        """)
        self.status_label.hide()
        layout.addWidget(self.status_label)
        
        layout.addStretch()
    
    def create_basic_buttons_group(self):
        """创建基础按钮组"""
        group = QGroupBox("基础按钮")
        group.setStyleSheet("""
            QGroupBox {
                font-weight: bold;
                font-size: 16px;
                color: #303133;
                border: 2px solid #dcdfe6;
                border-radius: 5px;
                margin-top: 10px;
                padding-top: 15px;
                background-color: #ffffff;
            }
            QGroupBox::title {
                subcontrol-origin: margin;
                left: 10px;
                padding: 0 5px 0 5px;
                background-color: #ffffff;
            }
        """)
        
        layout = QHBoxLayout(group)
        layout.setSpacing(15)
        layout.setContentsMargins(20, 25, 20, 20)
        
        button_types = [
            ("默认按钮", "default"),
            ("主要按钮", "primary"),
            ("成功按钮", "success"), 
            ("信息按钮", "info"),
            ("警告按钮", "warning"),
            ("危险按钮", "danger")
        ]
        
        for text, btn_type in button_types:
            btn = ElementButton(text, btn_type, "default")
            btn.clicked.connect(lambda checked, t=text: self.on_button_click(f"{t}被点击"))
            layout.addWidget(btn)
        
        layout.addStretch()
        
        return group
    
    def create_plain_buttons_group(self):
        """创建朴素按钮组"""
        group = QGroupBox("朴素按钮")
        group.setStyleSheet("""
            QGroupBox {
                font-weight: bold;
                font-size: 16px;
                color: #303133;
                border: 2px solid #dcdfe6;
                border-radius: 5px;
                margin-top: 10px;
                padding-top: 15px;
                background-color: #ffffff;
            }
            QGroupBox::title {
                subcontrol-origin: margin;
                left: 10px;
                padding: 0 5px 0 5px;
                background-color: #ffffff;
            }
        """)
        
        layout = QHBoxLayout(group)
        layout.setSpacing(15)
        layout.setContentsMargins(20, 25, 20, 20)
        
        button_types = [
            ("朴素按钮", "default"),
            ("主要按钮", "primary"), 
            ("成功按钮", "success"),
            ("信息按钮", "info"),
            ("警告按钮", "warning"),
            ("危险按钮", "danger")
        ]
        
        for text, btn_type in button_types:
            btn = ElementButton(text, btn_type, "default", plain=True)
            btn.clicked.connect(lambda checked, t=text: self.on_button_click(f"朴素{t}被点击"))
            layout.addWidget(btn)
        
        layout.addStretch()
        
        return group
    
    def create_size_buttons_group(self):
        """创建不同尺寸按钮组"""
        group = QGroupBox("不同尺寸")
        group.setStyleSheet("""
            QGroupBox {
                font-weight: bold;
                font-size: 16px;
                color: #303133;
                border: 2px solid #dcdfe6;
                border-radius: 5px;
                margin-top: 10px;
                padding-top: 15px;
                background-color: #ffffff;
            }
            QGroupBox::title {
                subcontrol-origin: margin;
                left: 10px;
                padding: 0 5px 0 5px;
                background-color: #ffffff;
            }
        """)
        
        layout = QHBoxLayout(group)
        layout.setSpacing(15)
        layout.setContentsMargins(20, 25, 20, 20)
        
        sizes = [
            ("大型按钮", "large"),
            ("默认按钮", "default"),
            ("小型按钮", "small"),
            ("超小按钮", "mini")
        ]
        
        for text, size in sizes:
            btn = ElementButton(text, "primary", size)
            btn.clicked.connect(lambda checked, t=text: self.on_button_click(f"{t}被点击"))
            layout.addWidget(btn)
        
        layout.addStretch()
        
        return group
    
    def create_button_states_group(self):
        """创建按钮状态演示组"""
        group = QGroupBox("按钮状态")
        group.setStyleSheet("""
            QGroupBox {
                font-weight: bold;
                font-size: 16px;
                color: #303133;
                border: 2px solid #dcdfe6;
                border-radius: 5px;
                margin-top: 10px;
                padding-top: 15px;
                background-color: #ffffff;
            }
            QGroupBox::title {
                subcontrol-origin: margin;
                left: 10px;
                padding: 0 5px 0 5px;
                background-color: #ffffff;
            }
        """)
        
        layout = QHBoxLayout(group)
        layout.setSpacing(15)
        layout.setContentsMargins(20, 25, 20, 20)
        
        # 正常按钮
        normal_btn = ElementButton("活跃按钮", "success", "default")
        normal_btn.clicked.connect(lambda: self.on_button_click("活跃按钮被点击"))
        layout.addWidget(normal_btn)
        
        # 禁用按钮
        disabled_btn = ElementButton("禁用按钮", "primary", "default")
        disabled_btn.setEnabled(False)
        layout.addWidget(disabled_btn)
        
        # 朴素禁用按钮
        plain_disabled_btn = ElementButton("朴素禁用", "warning", "default", plain=True)
        plain_disabled_btn.setEnabled(False)
        layout.addWidget(plain_disabled_btn)
        
        # 危险禁用按钮
        danger_disabled_btn = ElementButton("危险禁用", "danger", "default")
        danger_disabled_btn.setEnabled(False)
        layout.addWidget(danger_disabled_btn)
        
        layout.addStretch()
        
        return group
    
    def on_button_click(self, message):
        """按钮点击事件处理"""
        print(f"[按钮点击] {message}")
        
        # 显示点击反馈
        self.status_label.setText(f"✓ {message}")
        self.status_label.show()
        
        # 3秒后隐藏消息
        QTimer.singleShot(3000, lambda: self.status_label.hide())


def main():
    """主函数"""
    app = QApplication(sys.argv)
    
    # 设置应用样式
    app.setStyle('Fusion')
    
    # 设置全局字体
    font = QFont("Microsoft YaHei", 10)
    app.setFont(font)
    
    # 设置应用图标和名称
    app.setApplicationName("Element UI Button Showcase")
    app.setApplicationVersion("2.0")
    
    # 创建主窗口
    window = ButtonShowcase()
    window.show()
    
    print("🎉 Element UI 按钮样式演示应用启动成功！")
    print("")
    print("✨ 功能特性：")
    print("  • 完全按照Element UI官方设计规范实现")
    print("  • 6种按钮类型：默认、主要、成功、信息、警告、危险")
    print("  • 4种按钮尺寸：大型(40px)、默认(32px)、小型(28px)、超小(24px)")
    print("  • 支持朴素按钮样式(plain)")
    print("  • 支持悬停、点击、禁用等状态")
    print("  • 精确的颜色和间距配置")
    print("")
    print("🖱️  点击任意按钮测试交互效果！")
    
    return app.exec()


if __name__ == "__main__":
    sys.exit(main())
